<template>
  <div class="report-container">
    <div class="top">
      <div class="left">
        <div class="left-top">
          <div class="left-top-left">
            <div class="title">
              <h3>日销售统计</h3>
            </div>
            <div class="count">
              <div class="gd">
                <p>{{ dayData.orderCount }}</p>
                <span>当日销售量（个）</span>
              </div>
              <div class="gd">
                <p>{{ dayData.orderAmount }}</p>
                <span>当日销售额（元）</span>
              </div>
              <div class="gd">
                <p>{{ dayData.totalBill }}</p>
                <span>当日分成（元）</span>
              </div>
            </div>
          </div>
          <div class="left-top-right">
            <div class="title">
              <h3>月销售统计</h3>
            </div>
            <div class="count">
              <div class="gd">
                <p>{{ orderCount }}</p>
                <span>当月销售量（个）</span>
              </div>
              <div class="gd">
                <p>{{ orderAmount }}</p>
                <span>当月销售额（元）</span>
              </div>
              <div class="gd">
                <p>{{ totalBill }}</p>
                <span>当月分成（元）</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="search">
        <el-form :inline="true">
          <el-form-item label="合作商：">
            <el-select v-model="name" placeholder="请选择">
              <el-option
                v-for="item in nodeList"
                :key="item.name"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="日期：">
            <el-date-picker
              v-model="dataValue"
              type="daterange"
              range-separator="~"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
            />
          </el-form-item>

          <el-form-item>
            <el-button
              class="el-icon-search searchBtn"
              @click="searchReport"
            >
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="text">
        <span>收入统计：<span class="counts">{{ searchData.orderCount || orderCount }}</span></span>
        <span>笔数统计：<span class="counts">{{ searchData.orderAmount ||orderAmount }}</span></span>
        <span>分成统计：<span class="counts">{{ searchData.totalBill ||totalBill }}</span></span>
      </div>
    </div>

    <!-- Table部分 -->
    <div class="tablePart">
      <el-table
        :data="reportList"
        style="width: 100%"
        :header-cell-style="{background:'#f3f6fb'}"
      >
        <el-table-column
          prop="ownerId"
          label="订单日期"
        />
        <el-table-column
          prop="orderNo"
          label="合租商"
          width="230px"
        />
        <el-table-column
          prop="skuName"
          label="分成比例"
        />
        <el-table-column
          prop="price"
          label="收入（元）"
        >
          <template #default="{row}">{{ row.price/100 }}</template>
        </el-table-column>

        <el-table-column
          prop="innerCode"
          label="笔数"
        />
        <el-table-column
          prop="status"
          label="分成金额（元）"
        />

      </el-table>
    </div>
    <!-- Table部分 -->
  </div>
</template>

<script>
import { nodeCollect, orderAmount, totalBill, orderCount, partnerCollect } from '@/api/aliceRequests.js'
export default {
  name: 'DikedeIndex',

  data() {
    return {
      name: '',
      dataValue: [],
      nodeList: [],
      reportList: [],
      orderAmount: 0,
      totalBill: null,
      orderCount: null,
      partnerCollect: {
        pageIndex: 1,
        pageSize: 10,
        start: '',
        end: ''
      },
      currentTime: {
        start: '',
        end: ''
      },
      dayData: {
        orderAmount: 0,
        totalBill: null,
        orderCount: null
      },
      searchData: {
        orderAmount: 0,
        totalBill: null,
        orderCount: null
      },
      // 设置时间可选择的范围
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      }
    }
  },

  created() {
    this.getnodeCollect()
    this.getorderAmount()
    this.gettotalBill()
    this.getOrderCount()
    this.defaultDate()
    this.getpartnerCollect()
  },

  methods: {
    defaultDate() {
      // 获取新的时间
      const date = new Date()
      // 获取当前时间的年份转为字符串
      const year = date.getFullYear().toString()
      // 获取月份，由于月份从0开始，此处要加1，判断是否小于10，如果是在字符串前面拼接'0'
      const month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1).toString() : (date.getMonth() + 1).toString()
      // 获取天，判断是否小于10，如果是在字符串前面拼接'0'
      const day = date.getDate() < 10 ? '0' + date.getDate().toString() : date.getDate().toString()
      // 字符串拼接，开始时间，结束时间
      const end = year + '-' + month + '-' + day // 当天
      const beg = year + '-' + month + '-01' // 当月第一天

      this.dataValue = [beg, end] // 将值设置给日期选择器
      this.partnerCollect.start = `${beg} 00:00:00`
      this.partnerCollect.end = `${end} 23:59:59`
    },

    // 获取供应商名称
    async getnodeCollect() {
      const data = await nodeCollect()
      // console.log(data)
      this.nodeList = [...data]
    },
    // 获取一定时间范围之内的收入
    async getorderAmount() {
      this.defaultDate()
      const data = await orderAmount(this.partnerCollect.start, this.partnerCollect.end)
      this.currentTime.start = `${this.$moment().format('YYYY-MM-DD 00:00:00')}`
      this.currentTime.end = `${this.$moment().format('YYYY-MM-DD 23:59:59')}`
      const res = await orderAmount(this.currentTime.start, this.currentTime.end)

      // console.log(data)
      this.orderAmount = Number(data) / 100
      this.dayData.orderAmount = Number(res) / 100
    },
    // 获取一定时间范围之内的分成总数
    async gettotalBill() {
      this.defaultDate()
      // console.log(this.partnerCollect.start)
      const data = await totalBill(this.partnerCollect.start, this.partnerCollect.end)
      this.currentTime.start = `${this.$moment().format('YYYY-MM-DD 00:00:00')}`
      this.currentTime.end = `${this.$moment().format('YYYY-MM-DD 23:59:59')}`
      const res = await totalBill(this.currentTime.start, this.currentTime.end)
      // console.log(data)
      this.totalBill = Number(data) / 100
      this.dayData.totalBill = Number(res) / 100
    },
    // 获取一定时间范围之内的订单总数
    async getOrderCount() {
      this.defaultDate()
      const data = await orderCount(this.partnerCollect.start, this.partnerCollect.end)
      this.currentTime.start = `${this.$moment().format('YYYY-MM-DD 00:00:00')}`
      this.currentTime.end = `${this.$moment().format('YYYY-MM-DD 23:59:59')}`
      const res = await orderCount(this.currentTime.start, this.currentTime.end)
      // console.log(data)
      this.orderCount = Number(data)
      this.dayData.orderCount = Number(res) / 100
    },

    async getpartnerCollect() {
      await partnerCollect(this.partnerCollect)
      // console.log(data)
    },
    // 根据不同的时间段发起请求
    async searchReport() {
      // 获取一定时间范围之内的收入
      this.searchData.orderAmount = await orderAmount(`${this.dataValue[0]} 00:00:00`, `${this.dataValue[1]} 23:59:59`) / 100
      // 获取一定时间范围之内的分成总数
      this.searchData.totalBill = await totalBill(`${this.dataValue[0]} 00:00:00`, `${this.dataValue[1]} 23:59:59`) / 100
      // 获取一定时间范围之内的订单总数
      this.searchData.orderCount = await orderCount(`${this.dataValue[0]} 00:00:00`, `${this.dataValue[1]} 23:59:59`)
    }
  }
}
</script>

<style lang="scss" scoped>
.report-container{
  padding: 20px;
   .top {
    width: 100%;
    display: flex;
    margin-bottom: 20px;
    .left {
      width: 100%;
      .left-top{
        display: flex;
        .left-top-left {
        width: 650px;
        height: 150px;
        background-color: #e9f3ff;
        border-radius: 20px;
        padding: 15px;
        .title {
          margin-top: 15px;
          margin-bottom: 20px;
          font-size: 14px;
          display: flex;
          h3 {
            line-height: 0;
            margin: 0;
          }
          span {
            margin: 0;
            line-height: 0;
            font-size: 12px;
            color: #999;
            margin-left: 10px;
          }
        }
        .count {
          display: flex;
          .gd {
            flex: 1;
            display: flex;
            flex-direction: column;
            text-align: center;
            color: #91a7dc;
            font-size: 12px;
          }
          p {
            color: #072074;
            font-size: 36px;
            margin: 0;
            margin: 10px 0;
            font-weight: 700;
          }
        }
      }
      .left-top-right {
        margin-left: 20px;
        width: 650px;
        height: 150px;
        background-color: #fbefe8;
        border-radius: 20px;
        padding: 15px;
         .title {
          margin-top: 15px;
          margin-bottom: 20px;
          font-size: 14px;
          display: flex;
          h3 {
            line-height: 0;
            margin: 0;
          }
          span {
            margin: 0;
            line-height: 0;
            font-size: 12px;
            color: #999;
            margin-left: 10px;
          }
        }
        .count {
          display: flex;
          .gd {
            flex: 1;
            display: flex;
            flex-direction: column;
            text-align: center;
            color: #de9690;
            font-size: 12px;
          }
          p {
            color: #ff5757;
            font-size: 36px;
            margin: 0;
            margin: 10px 0;
            font-weight: 700;
          }
        }
      }
    }
   }
 }
 .content{
  width: 100%;
  background-color: #fff;
   .search{
    padding: 10px 20px;
    height: 64px;
    align-items: center;
    margin-bottom: 20px;
    background-color: #fff;
    .searchBtn {
      background-color: #5f84ff;
      color: #fff;
    }
  }
 }
.tablePart{
  padding: 20px 15px 19px 17px;
}
}
.text span{
 padding: 10px;
 margin-right:20px ;
 font-size: 14px;
 color: #333;
 font-weight: 500;
 .counts{
    font-size: 20px;
    color: #ff5757;
    font-weight: 500;
 }
}
</style>
